import QtQuick
import QtQuick.Controls

Item {
    id: myslider

    // 图片高度
    property int imageHeight: 0
    // 图片宽度
    property int imageWidth: 0
    property string leftSourceOff: ""
    property string leftSourceOn: ""
    property string midelSourceOff: ""
    // 各种状态下的图片路径
    property string midelSourceOn: ""
    property string rightSourceOff: ""
    property string rightSourceOn: ""
    // 自定义属性定义：表示滑块值
    property int sliderValue: 0

    // 图片显示的行布局
    Row {
        id: row

        anchors.centerIn: parent // 居中放置在父元素
        height: parent.height / 2
        spacing: 4
        width: parent.width

        // 以下为各个 Image 控件，显示滑块的不同状态
        Image {
            id: valueImage1

            fillMode: Image.PreserveAspectFit // 保持宽高比适应大小
            height: myslider.imageHeight
            opacity: myslider.enabled ? 1 : 0.3 // 根据滑块是否启用设置透明度
            source: (myslider.sliderValue >= 1) ? leftSourceOn : leftSourceOff // 根据 value 切换显示图片
            width: myslider.imageWidth
        }
        Image {
            id: valueImage2

            fillMode: Image.PreserveAspectFit
            height: myslider.imageHeight
            opacity: myslider.enabled ? 1 : 0.3
            source: (myslider.sliderValue >= 2) ? midelSourceOn : midelSourceOff
            width: myslider.imageWidth
        }
        Image {
            id: valueImage3

            fillMode: Image.PreserveAspectFit
            height: myslider.imageHeight
            opacity: myslider.enabled ? 1 : 0.3
            source: (myslider.sliderValue >= 3) ? midelSourceOn : midelSourceOff
            width: myslider.imageWidth
        }
        Image {
            id: valueImage4

            fillMode: Image.PreserveAspectFit
            height: myslider.imageHeight
            opacity: myslider.enabled ? 1 : 0.3
            source: (myslider.sliderValue >= 4) ? midelSourceOn : midelSourceOff
            width: myslider.imageWidth
        }
        Image {
            id: valueImage5

            fillMode: Image.PreserveAspectFit
            height: myslider.imageHeight
            opacity: myslider.enabled ? 1 : 0.3
            source: (myslider.sliderValue >= 5) ? rightSourceOn : rightSourceOff
            width: myslider.imageWidth
        }
    }

    // 隐藏样式的滑块控件，控制行布局中的图片变化
    Slider {
        id: slider

        anchors.fill: parent // 填充父元素的空间
        enabled: true
        from: 0
        stepSize: 1 // 每次滑动的步长
        to: 5
        z: row.z + 1 // 确保滑块在 Row 之上

        // 隐藏背景和滑块样式(调试可注释掉)
        background: Rectangle {
            opacity: 0
        }
        handle: Rectangle {
            opacity: 0
        }

        // 滑块值发生改变时触发
        onValueChanged: {
            // 根据当前滑块值，设置显示对应的图片
            if (value <= 0) {
                myslider.sliderValue = 0;
            } else if (value < (slider.stepSize * 2)) {
                myslider.sliderValue = 1;
            } else if (value < (slider.stepSize * 3)) {
                myslider.sliderValue = 2;
            } else if (value < (slider.stepSize * 4)) {
                myslider.sliderValue = 3;
            } else if (value < (slider.stepSize * 5)) {
                myslider.sliderValue = 4;
            } else {
                myslider.sliderValue = 5;
            }
            console.log("sliderValue = " + myslider.sliderValue)
        }
    }
}
